<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">sum+1</button>
</template>

<script>
import {reactive, ref, onBeforeMount,onMounted, onBeforeUpdate,onUpdated, onBeforeUnmount, onUnmounted} from "vue";

export default {
  name: "Demo",
  components: {},
  props: [],
  emits: [], // 用于注册VC的自定义事件，可不写，但会报警
  setup() {
    console.log('---setup---');
    let sum = ref(0);
    onBeforeMount(() => {
      console.log('---onBeforeMount---')
    });
    onMounted(() => {
      console.log('---onMounted---')
    });
    onBeforeUpdate(() => {
      console.log('---onBeforeUpdate---')
    });
    onUpdated(() => {
      console.log('---onUpdated---')
    });
    onBeforeUnmount(() => {
      console.log('---onBeforeUnmount---')
    });
    onUnmounted(() => {
      console.log('---onUnmounted---')
    });

    return {
      sum,
    }
  },
  // region 通过配置项使用生命周期钩子
  /*beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },*/
  // endregion
}
</script>

<style scoped>

</style>